<template>
  <div class="background-3d"
       ref="container">
    <div class="overlay"></div>
  </div>
</template>

<script setup>
import * as THREE from 'three';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const container = ref(null);
let scene, camera, renderer, particles, mouseX = 0, mouseY = 0;

const init = () => {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
  renderer = new THREE.WebGLRenderer({ 
    alpha: true,
    antialias: true 
  });
  
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  container.value.appendChild(renderer.domElement);
  
  // 创建更复杂的粒子系统
  const geometry = new THREE.BufferGeometry();
  const vertices = [];
  const colors = [];
  const sizes = [];
  
  // 创建星系效果
  for (let i = 0; i < 15000; i++) {
    const radius = Math.random() * 1000;
    const theta = THREE.MathUtils.randFloatSpread(360);
    const phi = THREE.MathUtils.randFloatSpread(360);
    
    vertices.push(
      radius * Math.sin(theta) * Math.cos(phi),
      radius * Math.sin(theta) * Math.sin(phi),
      radius * Math.cos(theta)
    );
    
    // 添加渐变色效果
    const color = new THREE.Color();
    color.setHSL(Math.random(), 0.7, 0.7);
    colors.push(color.r, color.g, color.b);
    
    // 随机大小
    sizes.push(Math.random() * 4);
  }
  
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
  geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
  geometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));
  
  const material = new THREE.PointsMaterial({
    size: 2,
    vertexColors: true,
    transparent: true,
    opacity: 0.8,
    blending: THREE.AdditiveBlending
  });
  
  particles = new THREE.Points(geometry, material);
  scene.add(particles);
  camera.position.z = 1000;
  
  // 添加鼠标移动事件
  document.addEventListener('mousemove', onMouseMove);
  window.addEventListener('resize', onWindowResize);
};

const onMouseMove = (event) => {
  mouseX = (event.clientX - window.innerWidth / 2) * 0.05;
  mouseY = (event.clientY - window.innerHeight / 2) * 0.05;
};

const onWindowResize = () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
};

const animate = () => {
  requestAnimationFrame(animate);
  
  // 添加相机动画
  camera.position.x += (mouseX - camera.position.x) * 0.05;
  camera.position.y += (-mouseY - camera.position.y) * 0.05;
  camera.lookAt(scene.position);
  
  // 粒子旋转
  particles.rotation.x += 0.0003;
  particles.rotation.y += 0.0005;
  
  renderer.render(scene, camera);
};

onMounted(() => {
  init();
  animate();
});

onBeforeUnmount(() => {
  renderer?.dispose();
  document.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('resize', onWindowResize);
});
</script>

<style scoped>
.background-3d {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(45deg, #1a1a1a, #000000);
  background-image: url('http://cdn.yhxweb.cn/bizhi/1721007095-589488-20240222042738170854725857886.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
}
</style> 